<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模版语句的数据来源</title>
    <!--安装vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="app">
    {{name1}}
</div>
<!--vue程序-->
<script>
    /*
    * 模版语句的数据来源
    * 1.谁可以给模版语句提供数据支持呢?  data选项
    * 2.data选项的类型是什么? Object | Function (对象或者函数)
    * 3.data配置项的专业叫法:Vue实例的数据对象,(data对象实际上是给整个Vue实例提供数据来源的)
    * 4.如果data是对象的话,对象必须是纯粹的对象(含有零个或者多个的key:value对)
    * 5.data数据是如何插入到模版语句当中的?
    *   {{}}这是Vue框架自己搞的一套语法,别的框架看不懂的,浏览器也是不能识别的
    *   Vue框架自己能够看懂,这种语法在Vue框架中被称为:模版语法中的插值语法(有的人把他叫做胡子语法)
    *   怎么使用?
    *       {{data的key}}
    *   插值语法的小细节
    *   {这里不能有其他的字符包括空格{
    *   }这里不能有其他字符包括空格}
    *
    * 4.以上程序的执行原理:Vue编译器对template进行编译,遇到胡子{{}}的时候就从data中取出数据,然后将取到的数据插入到对应的位置
    * 生成一段HTML代码,最终将HTML渲染到挂载的位置,呈现
    * 5.当data发生变化的时候,template模版也会被重新编译,重新渲染
    *
    * 6：其实框架无论怎么发展,其实核心还是遵循原生的执行
    *   只是你用原生的东西造出更加方便的东西，最终还是要回归到原生来执行
    *   浏览器负责和js对接 vue负责和js对接   vue和浏览器之间不认识  所以  只需要使用更加强大且方便
    *   的vue经过一系列的操作 得到最终的js+html+css 的代码    然后给浏览器去执行
    * 7.总结一点：自己只需要把自己那部分负责的做好即可，其他的事情由其他的人负责
    * */
    new Vue({

        // template : `<h1>最近非常火爆的电视剧{{name}},它的上映时间是{{releaseTime}}。主角是{{lead.name}},年龄是{{lead.age}}岁,
        //         其他的演员包括{{actors[0].name}}{{actors[0].age}}岁,{{actors[1].name}}{{actors[1].age}}岁 -- {{a.b.c.d.e.name}}
        // </h1>`,
        data : {
            name1 : 'kb11',
            releaseTime : '2023年1月12日',
            lead : {
                name1 : 'gaoqi',
                age1 : 41
            },
            actors : [
                {
                    name1 : 'anxin',
                    age1 : 41
                },
                {
                    name1 : 'gaoqilan',
                    age1 : 29
                }
            ],
            a : {
                b : {
                    c :{
                        d : {
                            e : {
                                name1 : 'hehe'
                            }
                        }
                    }
                }
            }
        },
        el : '#app'
    })
    // .$mount("#app")
</script>

</body>
</html>